<template>
  <div class="inch-container">
    <OneIncheInput :label="'left'" @submit="getLeftInches"/>
    <OneIncheInput :label="'right'" @submit="getRightInches"/>
  </div>
  <div class="btn-container">
    <button v-if="btnVisible" type="button" @click="submitInches">continue</button>
  </div>
</template>

<script setup>

import {defineEmits, ref} from 'vue'
import OneIncheInput from '@/components/common/OneIncheInput.vue'

const left_inches = ref('')
const right_inches  = ref('')
const btnVisible = ref(false)
const emit = defineEmits(['submit'])

// btnVisible.value = true

const getLeftInches = (value) => {
    left_inches.value = value
   // console.log(right_inches.value.length)
    if(String(left_inches.value).length > 0 && String(right_inches.value).length > 0 ){
       btnVisible.value = true
    }
}

const getRightInches = (value) => {
  right_inches.value = value
  if(String(left_inches.value).length > 0 && String(right_inches.value).length > 0){
    btnVisible.value = true
  }
}

const submitInches = () => {
  emit('submit', {left: left_inches.value, right: right_inches.value})
}

</script>

<style scoped>

.inch-container {
   display:flex;
   justify-content: space-between;
   width:80%;
   margin:50px auto;
}

.inputs-container {
  display: flex;
}

.inner-container {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.positions {
   display:flex;
  text-transform: uppercase;
  justify-content: space-between;
}

input {
  border:none;
  outline:none;
  padding:10px;
  border-right: 1px solid #ccc;
}

.input-container {
  display: flex;
  justify-content: space-between;
  gap:15px;
  border:1px solid #ccc;
  align-items: center;
  width:500px;
  margin-bottom:10px;
}

.unit {
  display: flex;
  padding-left:10px;
  justify-content: center;
  font-weight: 700;
}

button {
  border:none;
  outline:none;
  padding:10px;
  background-color:black;
  color:white;
  display: flex;
  width:10rem;
  justify-content: center;
  font-size:1.5rem;
}

.btn-container {
  display: flex;
  justify-content: center;
}

</style>
